// const App = () => {
//   let count = 0;
//   const handleClick = () => {
//     count++;
//   };
//   return (
//     <>
//       <div>
//         <button onClick={handleClick}>点击+1</button> {count}
//       </div>
//     </>
//   );
// };
// export default App;

// import { useState } from 'react';
// const App = () => {
//   let [count, setCount] = useState(0);
//   const handleClick = () => {
//     // count++;
//     setCount(count + 1);
//   };
//   return (
//     <>
//       <div>
//         <button onClick={handleClick}>点击+1</button> {count}
//       </div>
//     </>
//   );
// };
// export default App;
// let num = 0;
// import { useState } from 'react';
// const App = () => {
//   let [count, setCount] = useState(0);
//   // if (num === 1) {
//   //   let [count1, setCount1] = useState(0);
//   //   setCount1(count1 + 2);
//   // }
//   let [count2, setCount2] = useState(0);
//   const handleClick = () => {
//     // count++;
//     // num++;
//     setCount(count + 1);

//     // setCount1(count1 + 2);

//     setCount2(count2 + 3);
//   };
//   return (
//     <>
//       <div>
//         <button onClick={handleClick}>点击+1</button> {count},{count2}
//       </div>
//     </>
//   );
// };
// export default App;
// import { useState } from 'react';

// function App() {
//   const [count, setCount] = useState(0);
//   const handleClick = () => {
//     // setCount(count + 1);//0 +1
//     // setCount(count + 1);//0 +1
//     // setCount(count + 1);//0 +1
//     setCount((c) => c + 1); //0 +1
//     setCount((c) => c + 1); //1 +1
//     setCount((c) => c + 1); //2 +1
//     console.log(count, '111'); //0 闭包
//   };
//   console.log('222');
//   return (
//     <div>
//       hello App
//       <button onClick={handleClick}>点击</button>
//       {count}
//     </div>
//   );
// }

// export default App;

// import { useState } from 'react';

// function App() {
//   let [count, setCount] = useState(0);

//   const handleClick = () => {
//     setCount(1); // 当修改状态的值没有发生改变的时候，函数组件并不会重新渲染
//   };
//   console.log(123);
//   return (
//     <div>
//       hello App
//       <button onClick={handleClick}>点击</button>
//       {count}, {Math.random()}
//     </div>
//   );
// }

// export default App;

// import { useState } from 'react';
// // import { cloneDeep } from 'lodash';
// function App() {
//   let [count, setCount] = useState(0);
//   let [list, setList] = useState([
//     {
//       id: 0,
//       text: 'aaa',
//     },
//     {
//       id: 1,
//       text: 'bbb',
//     },
//   ]);
//   let [info, setInfo] = useState({
//     username: {
//       first: 'xiao',
//       last: 'ming',
//     },
//     age: 20,
//   });
//   const handleClick = () => {
//     // count++; //错误的做法 -> ✖
//     setCount(count + 1); // ✔
//     // list.push({ id: 2, text: 'ccc' });
//     // setList(list);
//     //  直接对list进行了修改 -> 错误的做法 -> ✖

//     // setList([...list, { id: 4, text: 'ddd' }]); // ✔
//     //setList([...list, {id: 4, text: 'ddd'}])
//     //setList([{id: 4, text: 'ddd'}, ...list])
//     setList([...list.slice(0, 1), { id: 4, text: 'ddd' }, ...list.slice(1)]);
//     // 替换
//     // setList(
//     //   list.map((item) => {
//     //     if (item.id === 1) {
//     //       return { ...item, text: 'ddd' };
//     //     } else {
//     //       return item;
//     //     }
//     //   })
//     // );
//     // 浅拷贝复制 转序
//     // const cloneList = [...list]
//     // cloneList.reverse()
//     // setList(cloneList)
//     // 深拷贝复制 转序
//     // const cloneList = cloneDeep(list);
//     // cloneList.reverse();
//     // setList(cloneList);

//     // ------------对象
//     // 不正确的写法
//     // setInfo({
//     //   username: 'xiaobai'
//     // })

//     // setInfo({
//     //   ...info,
//     //   username: 'xiaobai'
//     // })
//     // 浅拷贝
//     setInfo({
//       ...info,
//       username: {
//         ...info.username,
//         first: 'da',
//       },
//     });
//     // 深拷贝
//     // const cloneInfo = cloneDeep(info);
//     // cloneInfo.username.first = 'da';
//     // setInfo(cloneInfo);
//   };
//   console.log(123);
//   return (
//     <div>
//       hello App
//       <button onClick={handleClick}>点击</button>
//       {count}
//       <bir />
//       <ul>
//         {list.map((item) => (
//           <li key={item.id}>{item.text}</li>
//         ))}
//       </ul>
//       <bir />
//       {JSON.stringify(info)}
//     </div>
//   );
// }

// export default App;

import { useImmer } from 'use-immer';

function App() {
  const [info, setInfo] = useImmer({
    username: {
      first: 'xiao',
      last: 'ming',
    },
    age: 20,
  });
  const handleClick = () => {
    setInfo((draft) => {
      draft.username.first = 'da';
    });
  };
  return (
    <div>
      hello App
      <button onClick={handleClick}>点击</button>
      <div>{JSON.stringify(info)}</div>
    </div>
  );
}

export default App;
